/* 公共样式 */
html {
  font-size: 0.1333333vw
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
header {
  height: 40rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 8rem 0;
  background: #fff;
}

header>ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

header li {
  list-style: none;
  float: left;
  height: 40rem;
  text-align: center;
  line-height: 40rem;
  font-size: 24rem;
  cursor: pointer;
  flex-grow: 1;
}
header li.current {
  background-color: blue;
  color: rgb(0, 0, 0);
  border-radius: 18rem 0;
  font-weight: 700;
  background: linear-gradient(to right, skyblue, pink 50%, skyblue)
}
main {
  padding: 8rem;
  margin-top: 40rem;
}

main>section {
  display: none;
}

main>section.current {
  display: block;
}
/* 新闻部分 */
#news ul {
  width: 720rem;
}
#news ul li {
  height: 150rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10rem 0rem;
  background: radial-gradient(circle at center, pink, skyblue);
  padding: 0 10rem;
  border-top-left-radius: 30rem;
  border-bottom-right-radius: 30rem;
}
#news ul li img {
  width: 200rem;
  height: 100rem;
}
#news ul li a {
  margin-left: 30rem;
  text-indent: 2em;
  display: block;
  width: 500rem;
  height: 100rem;
  font-size: 16rem;
  font-weight: bold;
}
#news ul li span {
  width: 300rem;
  height: 20rem;
  margin-top: 50rem;
}
/* 笑话部分 */
#joke h2 {
  font-size: 22rem;
  color: red;
  text-align: center;
  margin: 10rem 0;
}

#joke li {
  margin-bottom: 10rem;
  background: linear-gradient(to right, skyblue, pink 50%, skyblue);
  border-radius: 18rem 0;
  padding: 10rem;
}

#joke p {
  text-indent: 2em;
  font-size: 20rem;
  line-height: 28rem;
}

#joke span {
  color: #fff;
  text-align: right;
  display: block;
  padding-right: 15rem;
}
/* 历史部分 */
#history ul {
  display: flex;
  flex-direction: column;
  font-size: 25rem;
}

#history ul li {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: nowrap;
  height: 100rem;
  font-size: 25rem;
  margin-bottom: 10rem;
  /* position: relative; */
  border: 1px solid transparent;
  width: 100%;
}

#history ul li div:first-child {
  width: 35%;
}

#history ul li div:last-child {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100rem;
  background-color: rgb(230, 241, 245);
  border: 1px solid white;
  border-radius: 10px;
  width: 65%;
}
#history .history-today,
#history div:first-child {
  background-color: #fc8500;
  color: white;
  border-radius: 10px;
  line-height: 100rem;
  height: 100%;
  margin-right: 10rem;
}

#history ul li:hover div:first-child {
  animation: activeL 0.3s linear forwards;
}

#history ul li div:last-child {
  animation: activeR 0.3s linear forwards;
}
@keyframes activeL {
  from {
      width: 30%;
  }

  to {
      width: 10%;
  }
}
@keyframes activeR {
  from {
      width: 65%;
  }

  to {
      width: 95%;
  }
}
/* NBA部分 */
table {
  width: 100%;
  border-collapse: collapse;
}
table caption {
  font-weight: bold;
}
table th {
  text-align: center;
}
table tr:first-child th {
  text-align: center;
}
td {
  height: 4rem;
}
table thead tr {
  background-color: #008c8c;
  color: #fff;
}
table tbody tr:hover {
  background-color: #ccc;
}
th,
td {
  border: 1px solid #999;
  text-align: center;
  padding: 20px 0;
}